<clr-wizard #wizard [(clrWizardOpen)]="createClusterOpened" (clrWizardOnCancel)="onCancel()"
            (clrWizardOnFinish)="onSubmit()">
  <clr-wizard-title>创建集群</clr-wizard-title>
  <clr-wizard-button [type]="'cancel'">取消</clr-wizard-button>
  <clr-wizard-button [type]="'previous'">上一步</clr-wizard-button>
  <clr-wizard-button [type]="'next'">下一步</clr-wizard-button>
  <clr-wizard-button [type]="'finish'">完成</clr-wizard-button>
  <clr-wizard-page [clrWizardPageNextDisabled]="!isBasicFormValid">
    <form clrForm class="clr-form clr-form-compact" #basicFrom='ngForm'>
      <ng-template clrPageTitle>基本信息</ng-template>
      <app-modal-alert #alertModal></app-modal-alert>
      <clr-select-container>
        <label>项目</label>
        <select clrSelect [(ngModel)]="cluster.item_name" name="itemName" (change)="onChangeItem(cluster.item_name)"
                required>
          <option value="">请选择</option>
          <option *ngFor="let item of items" [value]="item.name">{{item.name}}</option>
        </select>
      </clr-select-container>
      <clr-input-container>
        <label>集群名称</label>
        <input id="name" type="text" pattern="{{name_pattern}}"
               [(ngModel)]="cluster.name"
               name="cluster_name" (keyup)="handleValidation()" clrInput size=45 maxlength="25"
               required>
        <clr-control-helper>{{name_pattern_tip}}</clr-control-helper>
        <clr-control-error>{{name_pattern_tip}}</clr-control-error>
      </clr-input-container>
      <clr-input-container>
        <label>域名后缀</label>
        <input id="domain" type="text" pattern="{{domain_pattern}}"
               [(ngModel)]="cluster.cluster_doamin_suffix" name="cluster_domain" clrInput
               size=45
               maxlength="25"
               required>
        <clr-control-helper>输入集群域名的后缀,默认为全局域名后缀</clr-control-helper>
      </clr-input-container>
      <clr-select-container>
        <label>离线包</label>
        <select id="package" [(ngModel)]="cluster.package" name="package" class="clr-select" clrSelect required>
          <option value="">请选择离线包</option>
          <option *ngFor="let pk of packages" [value]="pk.name">{{pk.meta.resource}}</option>
        </select>
      </clr-select-container>
      <clr-select-container>
        <label>部署模式</label>
        <select name="deploy_type" [(ngModel)]="cluster.deploy_type" clrSelect required>
          <option value="">请选择</option>
          <option value="MANUAL">手动模式</option>
          <option value="AUTOMATIC">自动模式</option>
        </select>
      </clr-select-container>
    </form>
  </clr-wizard-page>
  <clr-wizard-page *ngIf="cluster.deploy_type === Automatic" [clrWizardPageNextDisabled]="planForm.invalid">
    <ng-template clrPageTitle>部署计划</ng-template>
    <form clrForm #planForm='ngForm'>
      <clr-select-container>
        <label>部署计划</label>
        <select clrSelect [(ngModel)]="cluster.plan" (change)="planOnChange()" name="plan" required>
          <option value="">请选择</option>
          <option *ngFor="let plan of plans" [value]="plan.name">{{plan.name}}</option>
        </select>
        <clr-control-helper>部署计划需要先授权到项目</clr-control-helper>
        <clr-control-error>部署计划需要先授权到项目</clr-control-error>
      </clr-select-container>
      <clr-input-container>
        <label>worker数量</label>
        <input clrInput size=45 type="number" min="1" (change)="onWorkerSizeChange()" [(ngModel)]="cluster.worker_size"
               name="work_size" required>
      </clr-input-container>
    </form>
  </clr-wizard-page>
  <clr-wizard-page [clrWizardPageNextDisabled]="!templateForm.valid" *ngIf="cluster.deploy_type===Manual">
    <ng-template clrPageTitle>部署模型</ng-template>
    <form clrForm #templateForm='ngForm'>
      <clr-radio-wrapper *ngFor="let template of templates">
        <input required type="radio" clrRadio [(ngModel)]="cluster.template" [value]="template.name"
               name="template" (change)="templateOnChange()"/>
        <label>{{template.name}}</label>
      </clr-radio-wrapper>
      <div *ngIf="template">
        <div>{{template.comment}}</div>
        <div *ngFor="let role of template.roles">
          <div *ngIf="!role.meta.hidden">
            <h3>{{role.name}}</h3>
            <hr/>
            <div>
              节点数:
              {{role.meta.requires.nodes_require[0]}}
              {{role.meta.requires.nodes_require[1]}}
            </div>
            <div>
              支持操作系统:
              <span *ngFor="let os of role.meta.allow_os">
  {{os.name}}&nbsp;
  <span *ngFor="let version of os.version">
  {{version}}&nbsp;
  </span>
  </span>
            </div>
            <h5>设备要求:</h5>
            <div>
              <clr-datagrid>
                <clr-dg-column>设备名称</clr-dg-column>
                <clr-dg-column>最低配置</clr-dg-column>
                <clr-dg-column>推荐配置</clr-dg-column>
                <clr-dg-column>单位</clr-dg-column>
                <clr-dg-column>备注</clr-dg-column>

                <clr-dg-row *clrDgItems="let require of role.meta.requires.device_require" [clrDgItem]="require">
                  <clr-dg-cell>{{require.verbose}}</clr-dg-cell>
                  <clr-dg-cell>{{require.minimal}}</clr-dg-cell>
                  <clr-dg-cell>{{require.excellent}}</clr-dg-cell>
                  <clr-dg-cell>{{require.unit}}</clr-dg-cell>
                  <clr-dg-cell>{{require.comment}}</clr-dg-cell>
                </clr-dg-row>
              </clr-datagrid>
            </div>
            <h5>磁盘要求:</h5>
            <div>
              <clr-datagrid>
                <clr-dg-column>设备名称</clr-dg-column>
                <clr-dg-column>最低配置</clr-dg-column>
                <clr-dg-column>推荐配置</clr-dg-column>
                <clr-dg-column>单位</clr-dg-column>
                <clr-dg-column>备注</clr-dg-column>

                <clr-dg-row *clrDgItems="let require of role.meta.requires.volumes_require" [clrDgItem]="require">
                  <clr-dg-cell>{{require.verbose}}</clr-dg-cell>
                  <clr-dg-cell>{{require.minimal}}</clr-dg-cell>
                  <clr-dg-cell>{{require.excellent}}</clr-dg-cell>
                  <clr-dg-cell>{{require.unit}}</clr-dg-cell>
                  <clr-dg-cell>{{require.comment}}</clr-dg-cell>
                </clr-dg-row>
              </clr-datagrid>
            </div>
          </div>
        </div>
      </div>

    </form>
  </clr-wizard-page>
  <clr-wizard-page *ngIf="cluster.deploy_type == Manual"
                   [clrWizardPageNextDisabled]="workerForm.invalid || hosts.length===0 || cluster.worker_size===0"
                   (clrWizardPageNext)="workerSizeOnChange()">
    <ng-template clrPageTitle>配置节点</ng-template>
    <form #workerForm='ngForm' clrForm class=" clr-form-compact">
      <clr-input-container>
        <label>worker数量</label>
        <input clrInput size=45 type="number" min="1" [(ngModel)]="cluster.worker_size"
               name="worker"
               (change)="workerSizeOnChange()" required>
        <clr-control-helper>
          当前可用最大主机数量:{{hosts.length}}<br>
          <span>需要先授权主机到项目</span>
        </clr-control-helper>
      </clr-input-container>
    </form>
  </clr-wizard-page>

  <clr-wizard-page [clrWizardPageNextDisabled]="!canNodeNext()" (clrWizardPageNext)="fullNode()"
                   *ngIf="cluster.deploy_type == Manual">
    <ng-template clrPageTitle>选择节点</ng-template>
    <form #nodeForm='ngForm' class="clr-form clr-form-compact">
      <div *ngFor="let group of groups">
        <h4>{{group.name}}</h4>
        <hr>
        <div *ngFor="let node of group.nodes">
          <div>
            <h5>{{node.name}} &nbsp;&nbsp;<i class="fa fa-close" *ngIf="node.delete"
                                             (click)="deleteNode(group,node)"></i></h5>
            <div class="clr-form-control clr-row">
              <label [for]="node.name+'host'" class="clr-control-label clr-col-xs-12 clr-col-md-2">选择主机</label>
              <div class="clr-control-container clr-col-xs-12 clr-col-md-10">
                <div class="clr-select-wrapper">
                  <select [id]="node.name+'host'" [(ngModel)]="node.host" name="node_host" (change)="onHostChange(node)"
                          class="clr-select" required>
                    <option value="">请选择主机</option>
                    <option *ngFor="let host of hosts | hostsFilter :nodes:node "
                            [value]="host.id">{{getHostInfo(host)}}
                    </option>
                  </select>
                  <clr-icon class="clr-validate-icon" shape="exclamation-circle"></clr-icon>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </form>
  </clr-wizard-page>
  <clr-wizard-page [clrWizardPageNextDisabled]="!canNetworkNext()">
    <ng-template clrPageTitle>配置网络</ng-template>
    <form #networkForm='ngForm' class="clr-form clr-form-compact">
      <clr-select-container>
        <label>kube-proxy 运行模式</label>
        <select clrSelect name="kubeproxy" [(ngModel)]="cluster.configs['PROXY_MODE']" required>
          <option value="iptables" selected>iptables</option>
          <option value="ipvs">ipvs(试验功能)</option>
        </select>
      </clr-select-container>
      <clr-select-container>
        <label>ingress</label>
        <select clrSelect name="ingress_backend" [(ngModel)]="cluster.configs['ingress_backend']" required>
          <option value="traefik" selected>traefik</option>
          <option value="nginx">nginx</option>
        </select>
      </clr-select-container>
      <clr-select-container>
        <label>网络插件</label>
        <select clrSelect [(ngModel)]="cluster.network_plugin" name="network" (change)="onNetworkChange()" required>
          <option value="">请选择</option>
          <option *ngFor="let network of networks" [value]="network.name">{{network.name}}</option>
        </select>
      </clr-select-container>
      <div *ngIf="network">
        <div *ngFor="let config of network.configs">
          <div [ngSwitch]="config.type">
            <clr-select-container *ngSwitchCase="'Select'">
              <label>{{config.alias}}</label>
              <select clrSelect [name]="config.name" [(ngModel)]="cluster.configs[config.name]"
                      required>
                <option value="">请选择</option>
                <option *ngFor="let opt of config.options"
                        [value]="opt.value">{{opt.name}}
                </option>
              </select>
            </clr-select-container>
            <clr-input-container *ngSwitchCase="'Input'">
              <label>{{config.alias}}</label>
              <input clrInput size=45 [name]="config.name" [(ngModel)]="cluster.configs[config.name]" required>
            </clr-input-container>
          </div>
        </div>
      </div>
      <span class="p7 prompt"
            *ngIf="cluster.network_plugin == 'flannel' && cluster.configs['FLANNEL_BACKEND']==='vxlan'">
        基于隧道，在任何网络环境下都可以正常工作<br>
        优势是对物理网络环境没有特殊要求，只要宿主机IP层可以路由互通即可<br>
        劣势是封包和解包耗费CPU性能，且额外的封装导致带宽浪费<br>
      </span>
      <span class="p7 prompt"
            *ngIf="cluster.network_plugin == 'flannel' && cluster.configs['FLANNEL_BACKEND']==='host-gw'">
        基于路由，不适用于公有云环境<br>
        优势是没有封包和解包过程，完全基于两端宿主机的路由表进行转发<br>
        劣势是要求宿主机在2层网络是互通，且路由表膨胀会导致性能降低<br>
      </span>
      <span class="p7 prompt"
            *ngIf="cluster.network_plugin == 'calico' && cluster.configs['CALICO_IPV4POOL_IPIP']==='Always'">
        基于隧道，在任何网络环境下都可以正常工作<br>
        优势是对物理网络环境没有特殊要求，只要宿主机IP层可以路由互通即可<br>
        劣势是封包和解包耗费CPU性能，且额外的封装导致带宽浪费<br>
      </span>
      <span class="p7 prompt"
            *ngIf="cluster.network_plugin == 'calico' && cluster.configs['CALICO_IPV4POOL_IPIP']==='off'">
        基于路由，不适用于公有云环境<br>
        优势是没有封包和解包过程，完全基于两端宿主机的路由表进行转发<br>
        劣势是要求宿主机在2层网络是互通，且路由表膨胀会导致性能降低<br>
      </span>
    </form>
  </clr-wizard-page>
  <clr-wizard-page (clrWizardPageOnLoad)="loadStorage()" [clrWizardPageNextDisabled]="storageForm.invalid">
    <ng-template clrPageTitle>配置存储</ng-template>
    <form #storageForm='ngForm' class="clr-form clr-form-compact">
      <clr-select-container>
        <label>存储类型</label>
        <select clrSelect [(ngModel)]="cluster.persistent_storage" name="storage" (change)="onStorageChange()" required>
          <option value="">请选择</option>
          <option *ngFor="let s of storages" [value]="s.name">{{s.name}}</option>
        </select>
      </clr-select-container>
      <div *ngIf="cluster.persistent_storage == 'rook-ceph'">
        <clr-select-container>
          <label>存储介质</label>
          <select clrSelect [(ngModel)]="cluster.configs['device_type']" name="device_type">
            <option value="">请选择¬</option>
            <option value="device">Device (建议生产环境使用)</option>
            <option value="path">Host Path (建议测试环境使用)</option>
          </select>
        </clr-select-container>
        <clr-input-container *ngIf="cluster.configs['device_type'] === 'device'">
          <label>Devices</label>
          <input clrInput [(ngModel)]="cluster.configs['rook_path']" name="path" size="45"/>
          <clr-control-helper>例如: sda,sdb 多块盘之间以,分隔
          </clr-control-helper>
        </clr-input-container>
        <clr-input-container *ngIf="cluster.configs['device_type'] === 'path'">
          <label>Path</label>
          <input clrInput [(ngModel)]="cluster.configs['rook_path']" name="path" size="45"/>
          <clr-control-helper>例如: /data/ceph</clr-control-helper>
        </clr-input-container>
      </div>
      <div *ngIf="cluster.persistent_storage==='nfs'">
        <clr-select-container>
          <label>NFS:</label>
          <select clrSelect name="nfs" [(ngModel)]="cluster.configs['nfs']" required>
            <option value="">请选择</option>
            <option *ngFor="let nfs of storageList" [value]="nfs.name">{{nfs.name}}</option>
          </select>
          <clr-control-helper>需要先授权存储到项目</clr-control-helper>
          <clr-control-error>需要先授权存储到项目</clr-control-error>
        </clr-select-container>
      </div>
      <div *ngIf="cluster.persistent_storage==='external-ceph'">
        <clr-select-container>
          <label>Ceph:</label>
          <select clrSelect name="external-ceph" [(ngModel)]="cluster.configs['external-ceph']" required>
            <option value="">请选择</option>
            <option *ngFor="let ceph of storageList" [value]="ceph.name">{{ceph.name}}</option>
          </select>
          <clr-control-helper>需要先授权存储到项目</clr-control-helper>
          <clr-control-error>需要先授权存储到项目</clr-control-error>
        </clr-select-container>
      </div>
      <div *ngIf="cluster.persistent_storage==='local-volume'">
        <clr-input-container>
          <label>路径</label>
          <input clrInput [(ngModel)]="cluster.configs['local_volume_path']" name="local-volume" size="45" required/>
          <clr-control-helper>例如: /opt/local-volume</clr-control-helper>
        </clr-input-container>
      </div>
    </form>
  </clr-wizard-page>
  <clr-wizard-page [clrWizardPageNextDisabled]="!canCheckNext()" *ngIf="cluster.deploy_type === Manual">
    <!--<clr-wizard-page>-->
    <ng-template clrPageTitle>配置检查</ng-template>
    <div>
      1.检查cpu
      <span [ngSwitch]="checkCpuState">
      <i *ngSwitchCase="'pending'" class=" fa fa-spinner fa-spin"></i>
      <clr-icon *ngSwitchCase="'success'" shape="success-standard"></clr-icon>
      <clr-icon *ngSwitchCase="'fail'" shape="error-standar" class="is-solid"></clr-icon>
      </span><br/>
      <div *ngIf="checkCpuState === 'fail'">
        <span style="color: green;">通过检查:</span> {{checkCpuResult.passed}}
        <br/>
        <span style="color: red;">未通过检查:</span> {{checkCpuResult.failed}}
      </div>
    </div>
    <div>
      2.检查内存
      <span [ngSwitch]="checkMemoryState">
         <i *ngSwitchCase="'pending'" class=" fa fa-spinner fa-spin"></i>
      <clr-icon *ngSwitchCase="'success'" shape="success-standard"></clr-icon>
      <clr-icon *ngSwitchCase="'fail'" shape="error-standar" class="is-solid"></clr-icon>
      </span><br/>
      <div *ngIf="checkMemoryState === 'fail'">
        <span style="color: green;">通过检查:</span> {{checkMemoryResult.passed}}
        <br/>
        <span style="color: red;">未通过检查:</span> {{checkMemoryResult.failed}}
      </div>
    </div>
    <div>
      3.检查操作系统
      <span [ngSwitch]="checkOsState">
      <i *ngSwitchCase="'pending'" class=" fa fa-spinner fa-spin"></i>
      <clr-icon *ngSwitchCase="'success'" shape="success-standard"></clr-icon>
      <clr-icon *ngSwitchCase="'fail'" shape="error-standar" class="is-solid"></clr-icon>
      </span><br/>
      <div *ngIf="checkOsState === 'fail'">
        <span style="color: green;">通过检查:</span> {{checkOsResult.passed}}
        <br/>
        <span style="color: red;">未通过检查:</span> {{checkOsResult.failed}}
      </div>
    </div>
  </clr-wizard-page>
  <clr-wizard-page>
    <form clrForm class="clr-form clr-form-compact">
      <ng-template clrPageTitle>其他设置</ng-template>
      <clr-input-container>
        <label>可运行POD数量</label>
        <input id="pod_count" type="number" [(ngModel)]="cluster.configs['MAX_PODS']" max="110"
               name="pod_count" clrInput size=45 maxlength="15"
               required>
      </clr-input-container>
      <clr-input-container>
        <label>Docker 数据目录</label>
        <input id="docker" type="text" [(ngModel)]="cluster.configs['STORAGE_DIR']"
               name="docker" clrInput size=45
               required>
      </clr-input-container>
      <clr-input-container>
        <label>Docker0 默认网段</label>
        <input id="docker_addr" type="text" [(ngModel)]="cluster.configs['DOCKER_ADDR']"
               name="docker_addr" clrInput size=45
               required>
      </clr-input-container>
      <clr-input-container>
        <label>Prometheus 监控数据保留时长(单位: 天)</label>
        <input id="prometheus" type="number" [(ngModel)]="cluster.configs['PROMETHEUS_RETENTION']"
               name="prometheus" clrInput size=45
               required>
      </clr-input-container>
      <clr-checkbox-container
        *ngIf="getPackageVars()&&(getPackageVars()['gpu_install'] === false || getPackageVars()['gpu_install'] === true) && cluster.deploy_type==='MANUAL'">
        <clr-checkbox-wrapper>
          <input type="checkbox" clrCheckbox name="gpu_install" [(ngModel)]="cluster.configs['gpu_install']"/>
          <label>安装 GPU 套件</label>
        </clr-checkbox-wrapper>
      </clr-checkbox-container>

    </form>
  </clr-wizard-page>
  <clr-wizard-page>
    <ng-template clrPageTitle>完成</ng-template>
    <section class="form-block">
      <ul class="list-unstyled">
        <li><b style="margin-right: 16px">集群名称:</b>{{cluster.name}}</li>
        <li><b style="margin-right: 16px">网络插件:</b>{{cluster.network_plugin}}</li>
        <li><b style="margin-right: 16px">存储类型:</b>{{cluster.persistent_storage}}</li>
        <li *ngIf="cluster.deploy_type === 'AUTOMATIC'"><b
          style="margin-right: 16px">部署计划:</b>{{cluster.plan}}
        </li>
        <li *ngIf="cluster.deploy_type === 'AUTOMATIC'"><b
          style="margin-right: 16px">Worker 数量:</b>{{cluster.worker_size}}
        </li>
      </ul>
      <div class="form-group" *ngFor="let config of configs">
        <label>{{config.alias}}:</label>
        <span>{{config.value}}</span>
      </div>
      <div class="row" *ngIf="nodes.length!=0">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
          <h5>节点信息</h5>
          <table class="table">
            <thead>
            <tr>
              <th>节点名称</th>
              <th>IP</th>
              <th>CPU(核)</th>
              <th>内存</th>
              <th>操作系统</th>
              <th>角色</th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let node of nodes">
              <td>{{node.name}}</td>
              <td>{{node.ip}}</td>
              <td>{{node.host_cpu_core}}</td>
              <td>{{node.host_memory}}</td>
              <td>{{node.host_os}} {{node.host_os_version}}</td>
              <td>{{node.roles}}</td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </section>
  </clr-wizard-page>
</clr-wizard>
